<template>
    <div>
        <h1>App</h1>
        <!-- <input type="text" v-model="username">{{ username }} -->

        <!-- 
            v-model 语法糖
            1. input 绑定响应数据 ： 数据变化->视图变化
            2. input 绑定输入事件，读取节点输入值赋值给响应数据变量 ： 视图变化->数据变化
         -->
        <input :value="username" @input="username = $event.target.value" /> {{ username }}

        <hr>
        <!-- 
            v-model 组件语法糖命名规范
            1. 事件规范 @update:属性名
            2. 符合事件规范，简写 v-model:属性名
            3· 组件内部只要实现父子传参即可
            4. 如果属性是 modelValue 可以省略不写
        修饰符
            1· 修饰符会被当作属性传入
            2. 修饰符传入（写了），对应修饰符属性值为ture
            3. 组件内要新增属性声明 `属性名Modifiers`
         -->
        <!-- <TsInput :modelValue="username" @update:modelValue="log" :age="" @update:age="" :ageModifiers="true"></TsInput> -->

        <TsInput v-model:modelValue.lowercase="username" v-model:age="age"></TsInput> {{ age }}
    </div>
</template>
<script setup>

import TsInput from './components/TsInput.vue'
import { ref } from 'vue';

const username = ref('jack')
const age = ref(20)

// function log(e) {
//     username.value = e;
// }

</script>

<style>
div {
    border: solid;
    padding: 10px;
}
</style>